<template>
    <div class="histogram">
        <div id="histogram" class="" style="width: 100%;height:200px;"></div>
    </div>
</template>

<script>
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/markPoint';
import 'echarts/lib/component/tooltip';
export default {
    mounted() {
        this.myChart = echarts.init(document.getElementById('histogram'));
        this.initData();
    },
    props: ['sevenDate', 'sevenDay'],
    methods: {
        initData() {
            const colors = ['#5793f3', '#675bba', '#d14a61'];
            const option = {
                tooltip: {
                    trigger: 'axis',
                
                },
                color: colors,
                legend: {
                    data: ['尖时段','峰时段','平时段','谷时段']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['2023/03/01', '2023/03/02', '2023/03/03', '2023/03/04', '2012/03/05', '2023/03/06', '2023/03/07', '2023/03/08', '2023/03/09', '2023/03/10']
                        // axisLabel:{
                        //   formatter:function(value){
                        //     var d = Date(value)
                        //     // return [d.getFullYear(),d.getMouth() +1,d.getDate()].join('-')
                        //   }
                        // }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '尖时段',
                        type: 'bar',
                        barWidth:'30%',
                        stack: 'Ad',
                        emphasis: {
                            focus: 'series'
                        },
                        data: this.sevenDate[0]
                    },
                    {
                        name: '峰时段',
                        type: 'bar',
                        barWidth:'30%',
                        stack: 'Ad',
                        emphasis: {
                            focus: 'series'
                        },
                        data: this.sevenDate[1]
                    },
                    {
                        name: '平时段',
                        type: 'bar',
                        barWidth:'30%',
                        stack: 'Ad',
                        emphasis: {
                            focus: 'series'
                        },
                        data: this.sevenDate[2]
                    },
                    {
                        name: '谷时段',
                        type: 'bar',
                        barWidth:'30%',
                        stack: 'Ad',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [620, 732, 701, 734, 1090, 1130, 1120, 230, 232, 560]
                    },
                ]
            };
            this.myChart.setOption(option);
        }
    },
    watch: {
    }
}
</script>

<style lang="less">
@import '../style/mixin';

.histogram {
    display: flex;
    justify-content: center;
}
</style>
